<!-- 使用格式 -->
<img class="lazy" alt="" width="640" height="480"
	src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1796411554,1257847298&fm=26&gp=0.jpg"
	data-original="./imgs/1.jpg" />
<hr />
<img class="lazy" alt="" width="640" height="480"
	src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1796411554,1257847298&fm=26&gp=0.jpg"
	data-original="./imgs/2.jpg" />
<hr />
<img class="lazy" alt="" width="640" height="480"
	src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1796411554,1257847298&fm=26&gp=0.jpg"
	data-original="./imgs/3.jpg" />
<hr />
<img class="lazy" alt="" width="640" height="480"
	src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1796411554,1257847298&fm=26&gp=0.jpg"
	data-original="./imgs/4.jpg" />
<hr />
<img class="lazy" alt="" width="640" height="480"
	src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1796411554,1257847298&fm=26&gp=0.jpg"
	data-original="./imgs/5.jpg" />
<hr />
<img class="lazy" alt="" width="640" height="480"
	src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1796411554,1257847298&fm=26&gp=0.jpg"
	data-original="./imgs/6.jpg" />

<script>

	function lazyload() {
		console.log('触发啦~~~');
		// 1 当前可见内容的总高度 = 可见视口的高度 + 滚动的高度
		let totalScrollTop = (window.innerHeight || document.documentElement.clientHeight) + (document.body.scrollTop || document.documentElement.scrollTop)
		// 2 获取所有图片
		let imgObjs = document.querySelectorAll('img')
		// 3 遍历
		imgObjs.forEach((item, i) => { // jq  $.each i item  其他都是  item i
			// 4 当前图片到左上角的距离offsetTop < 1
			// 成立-修改src
			// 不成立-不管
			if (item.offsetTop < totalScrollTop) {
				item.src = item.getAttribute('data-original')
			}
		})
	}
	// window.onscroll = lazyload
	let t = null
	window.onscroll = function () {

		if (t) clearTimeout(t)

		t = setTimeout(() => {
			lazyload()
		}, 1000)
	}

	lazyload()

</script>